<template>
  <div v-if="message" class="conversation-message">
    <!--  消息时间 -->
    <div :class="[isFromUser?'time-right':'time-left']" class="time">{{messageTime}}</div>

    <!-- 消息信息  -->
    <div :class="[isFromUser?'message-right':'message-left']" class="message">
      <!-- 消息发送者头像 -->
      <el-avatar class="avatar" :src="fromUserAvatar"></el-avatar>
      <!-- 消息内容 -->
      <div :class="[isFromUser?'content-right':'content-left']" class="content">
        <!-- 图片消息 -->
        <template v-if="message.type === 2">
          <el-image  :preview-src-list="srcList"
                     :src="message.content"/>
        </template>
        <!-- 文本消息 -->
        <template v-if="message.type === 1">
          <span>{{message.content}}</span>
        </template>
        <!-- 视频消息 -->
        <template v-if="message.type === 3">
          <!-- 进度条 -->
          <el-progress v-if="message.showProgress"
                       :percentage="percentage"></el-progress>
          <video controls
                 :src="message.content">
          </video>
        </template>
        <!-- 三角 -->
        <div :class="[isFromUser?'angle-right':'angle-left']" class="angle "></div>
      </div>
      <!-- 消息的状态 -->
      <div v-if="isFromUser" class="status">
        <svg-icon v-if="message.status" class="icon" icon-class="read"></svg-icon>
        <svg-icon v-else class="icon" icon-class="unread"></svg-icon>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: "ConversationMessage",
    props: {
      message:{
        type:Object,
        default(){
          return {}
        }
      },
    },
    computed:{
      ...mapGetters([
        'id','avatar','friendList',
      ]),
      percentage(){
        return this.message.showProgress ?
          Math.floor(this.message.loaded / this.message.total * 100) : 0;
      },
      // 判断消息的发送者是否为当前用户
      isFromUser(){
        return this.message.fromId === this.id
      },
      // 获取当前消息的发送者的头像
      fromUserAvatar(){
        return this.isFromUser ?
          this.avatar : this.friendList.filter(item => item.userid === this.message.fromId)[0].avatar;
      },
      // 当前消息发送时间
      messageTime(){
       return  new Date(parseInt(this.message.sendTime)).toLocaleString();
      }
    },
    data(){
      return{
        srcList:[
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  .conversation-message {
    padding: 10px 15px 18px;
    .time {
      display: flex;
      display: -webkit-flex;
      padding: 0 0 6px;
      font-size: 12px;
    }

    .time-left {
      flex-direction: row;
    }

    .time-right {
      flex-direction: row-reverse;
    }

    .message-right {
      flex-direction: row-reverse;

      .content-right {
        margin-right: 16px;
        background-color: #9eea6a;
        .angle-right {
          right: -20px;
          border: 8px solid transparent;
          border-left: 15px solid #9eea6a;
        }
      }
    }

    .message-left {
      flex-direction: row;

      .content-left {
        margin-left: 16px;
        background-color: #5cadff;
        .angle-left {
          left: -20px;
          border: 8px solid transparent;
          border-right: 15px solid #5cadff;
        }
      }
    }

    .message {
      display: flex;
      display: -webkit-flex; //兼容 Safari浏览器
      .avatar {
        min-width: 45px;
        min-height: 45px;
      }

      .content {
        position: relative;
        padding: 10px;
        min-width: 20px;
        height: 100%;
        min-height: 40px;
        word-break: break-all;
        text-align: left;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);

        .el-image, video {
          cursor: pointer;
          max-width: 340px;
          max-height: 200px;
          outline: none;
        }

        .angle {
          position: absolute;
          top: 15px;
          width: 0;
          height: 0;
        }
      }
      .status {
        position: relative;
        min-width: 26px;
        color: #99799f;
        font-size: 12px;
        .icon {
          position: absolute;
          bottom: 5px;
          right: 8px;
          font-size: 15px;
        }
      }
    }
  }

</style>
